<!--
 * @Author: krsea 965837746@qq.com
 * @Date: 2025-03-03 11:20:26
 * @LastEditors: krsea 965837746@qq.com
 * @LastEditTime: 2025-03-03 11:39:11
 * @FilePath: \vue3-code\2305\week3\pre基础模板 结合列表循环和对象 props.html
 * @Description: 
 * 
 * Copyright (c) 2025 by ${git_name_email}, All Rights Reserved. 
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 组件与列表</title>
     <!-- 引入 Bootstrap CSS -->
     <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入 vue.js -->
     <script src="../js/vue.js"></script>
</head>
<body>
    <!-- div id 为 app 挂载点 -->
     <div id="app">
        <div class="container">
            <h2 class="text-center">商品列表</h2>
            <!-- 使用 v-for 循环渲染组件 -->
            <product-item 
                v-for="(item, index) in products" 
                :key="index" 
                :product="item">
            </product-item>
        </div>
     </div>
    
     <!-- 组件模板 -->
    <template id="product-item-template">
        <div class="col-md-4">
            <div class="card">
                <div class="card-body">
                    <h3 class="card-title">{{ product.name }}</h3>
                    <p class="card-text">价格: ${{ product.price }}</p>
                    <p class="card-text">描述: {{ product.description }}</p>
                </div>
            </div>
        </div>
    </template>

     <!-- 使用 javascript 脚本 -->
      <script type="text/javascript">
        // 定义商品项组件
        Vue.component('product-item', {
            template: '#product-item-template',
            props: ['product'] // 接收一个对象类型的 prop
        });

        // 创建 Vue 实例
        new Vue({
            el: '#app',
            data: {
                products: [
                    { name: 'iPhone 15', price: 999, description: '最新款苹果手机' },
                    { name: 'MacBook Pro', price: 1999, description: '高性能笔记本电脑' },
                    { name: 'Apple Watch', price: 399, description: '智能手表' }
                ]
            }
        });
      </script>
</body>
</html>